<template>
    <div id="app">
    <div id="left" class="container">
      <h1>合约信息修改</h1>
      <div class="form-mid-item">
        <label class="form-label" for="eventName">合约创建者</label>
        <select class="form-select">
            <option>小明</option>
            <option>小王</option>
            <option>小红</option>
        </select>
      </div>
      <div class="form-mid-item">
        <label class="form-label" for="eventName">合约归属</label>
        <select class="form-select">
            <option>小明</option>
            <option>小王</option>
            <option>小红</option>
        </select>
      </div>
      <div class="form-item">
        <label class="form-label" for="description">改动原因</label>
        <textarea
          class="form-input"
          id="description"
        ></textarea>
      </div>
      <div class="form-item">
        <label class="form-label" for="description">内容修改</label>
        <textarea
          class="form-input"
          id="description"
          rows="5"
        ></textarea>
      </div>
      <div class="form-item">
        <button class="form-button submit-button" @click="">申请修改</button>
      </div>
    </div>
    </div>
</template>
<script>
export default {
    name: "userHyChange",
    data(){
        return  {}
    },
    methods: {}
}
</script>
<style scoped>
.bm-view {
  width: 100%;
  height: 100%;
  margin-top: 0px;
}
#app {
  display: flex;
  width: 100%;
  height: 100%;
}
#left {
  left: 0px;
  flex: 45%;
  height: 100%;
  background: url("@/assets/images/guideBg.jpg");
  background-size: 110% 110%;
}
#right {
  flex: 55%;
  height: 100%;
}
/* 页面布局 */
body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
}

.container {
  max-width: 70%;
  margin: 0 auto;
  padding: 20px;
}

/* 表单样式 */
.form-item {
  margin-bottom: 20px;
}

.form-mid-item{
  width: 50%;
  display: inline-block;
}

.form-label {
  display: block;
  font-weight: bold;
  margin-bottom: 5px;
}

.form-input {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
}

.form-input[type="checkbox"] {
  width: auto;
}

.form-button {
  padding: 10px 20px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
}

.form-select{
    width: 80%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
    margin: 5px;
}

/* 日期选择器样式 */
.datepicker {
  position: relative;
}

.datepicker input {
  padding-right: 30px;
}

.datepicker .calendar-icon {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  font-size: 16px;
  color: #999;
  cursor: pointer;
}

/* 图片上传样式 */
.upload-container {
  display: flex;
  flex-wrap: wrap;
  margin-top: 10px;
}

.upload-item {
  width: calc(33.33% - 10px);
  margin-right: 10px;
  margin-bottom: 10px;
}

.upload-item img {
  width: 100%;
  height: auto;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.uploaded-photos-container {
  display: flex;
  flex-wrap: wrap;
  margin-top: 10px;
}

.uploaded-photo {
  width: 100px;
  height: 100px;
  margin-right: 10px;
  margin-bottom: 10px;
}

.uploaded-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.submit-button {
    width: 50%;
    margin-left: 25%;
    margin-top: 10%;
}
</style>